<template>
  <div class="record-box" v-if="showRecord">
    <div class="record-box-thead">
      <div class="cell">
        <div class="cell_left">期号</div>
        <div class="cell_right">开奖号码</div>
      </div>
    </div>
    <div class="record-box-tbody">
      <ul class="list">
        <li v-for="(item, index) in list" :key="index">
          <div class="cell_left">{{ item.periodsNumber }}期</div>
          <div class="drawingResult cell_right all-center" :class="isRally && 'box-rally'">
            <div v-for="(itm, idx) in item.numberList" :key="idx" class="all-center item">
              <span v-if="idx !== 0" class="line">{{ itm.symbol }}</span>
              <div class="number all-center">{{ itm.number }}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { findHistoryPage } from '@/api'
import { $utils } from '@utils'
import { useGameStore } from '@/stores/game'
import { GAME_STATUS_CODE } from '@/enum'

const gameStore = useGameStore()

const showRecord = ref(false)

const rally = ['QXC',]
const isRally = computed(() => rally.includes(gameStore.currentGame))

const list = ref([])

const fetchHistory = async () => {
  try {
    const params = {
      size: 50,
      current: 1,
      lotteryCode: gameStore.currentGame,
    }

    const {
      data: { records },
    } = await findHistoryPage(params)

    list.value = handleList(records)
  } catch {
    /* empty */
  }
}

const handleList = (list) => {
  if ($utils.isEmpty(list)) return []
  list.forEach((item) => {
    const arr = []
    if ($utils.isEmpty(item.drawingResult)) return
    let numList = item.drawingResult.split(',')
    numList.map((numItem) => {
      arr.push({
        number: numItem,
        symbol: '+',
      })
    })
    let sum = numList.reduce((prev, current) => Number(prev) + Number(current), 0)
    arr.push({
      number: sum,
      symbol: '=',
    })
    item.numberList = arr
  })
  return list
}

watch(
  () => gameStore.drawingStatus,
  (newValue) => {
    if (newValue.code === GAME_STATUS_CODE.kaijiang.code && showRecord.value) {
      // 已开奖
      setTimeout(() => {
        fetchHistory()
      }, 700)
    }
  },
)

// 显示或隐藏
const showOrHide = () => {
  showRecord.value = !showRecord.value
  if (showRecord.value) {
    list.value = []
    fetchHistory()
  }
}

const open = () => {
  showRecord.value = true
}

const close = () => {
  showRecord.value = false
}

defineExpose({
  open,
  close,
  showOrHide,
})
</script>

<style scoped lang="less">
.record-box {
  box-sizing: border-box;
  width: 100%;
  background: #171a26;
  position: absolute;
  top: -0;
  z-index: 99;
  max-height: 392px;
  min-height: 200px;
  left: 0;
  overflow: hidden;
  font-family: Inter;
  &-thead {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: Inter;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    color: #a2a9e6;
    border-bottom: 1px solid #363d57;
    .cell {
      min-height: 33px;
      display: flex;
      align-items: center;
    }
  }
  .cell_left {
    width: 38%;
    text-align: center;
    color: #bdc4ff;
  }
  .cell_right {
    width: 62%;
    text-align: center;
    // padding-left: 12px;
    box-sizing: border-box;
  }
  &-tbody {
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: #6a6a6a;
    overflow-y: scroll;
    height: 260px;
    .list {
      li {
        width: 100%;
        height: 34px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        box-sizing: border-box;
        &:nth-child(even) {
          background: #212432;
        }
        .drawingResult {
          span {
            line-height: 1;
            color: #fff;
            padding: 0 5px;
            box-sizing: border-box;
            font-size: 15px;
          }
          .number {
            width: 24px;
            height: 24px;
            line-height: 1;
            border-radius: 16px;
          }
          .item {
            .number {
              color: #008ddc;
              background: #fff;
              border: 2px solid #008ddc;
              font-size: 14px;
              line-height: 1;
            }
            &:nth-last-child(1) {
              .number {
                color: #fe5c73;
                background: #fff;
                border: 2px solid #fe5c73;
                font-size: 14px;
              }
            }
          }
        }
        .box-rally {
          .item {
            .number {
              color: #6950ff;
              border: 2px solid #6950ff;
            }
          }
        }
      }
    }
  }
  :deep(.van-list) {
    padding-bottom: 40px;
    box-sizing: border-box;
  }

  :deep(.van-list__finished-text, .van-loading__text, .van-pull-refresh__head) {
    font-size: 12px;
  }
}
</style>
